
<template>
    <Myhead title="注册账号"></Myhead>
    <div class="form">
        <div class="welcom">欢迎注册周末游app账号</div>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="phone" name="phone" label="手机号" placeholder="手机号"
                    :rules="[{ required: true, message: '请输入手机号' }]" />
                <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]">
                    <template #button>
                        <van-button size="small" type="primary" @click="send" :disabled=flag>{{ flag ? '剩余' +
                            time + '秒' : '发送验证码'
                        }}</van-button>
                    </template>
                </van-field>
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                    :rules="[{ validator, message: '请填写6-12位密码' }]" />
                <van-field v-model="password2" type="password" name="checkword" label="确认密码" placeholder="确认密码"
                    :rules="[{ validator, message: '请填写6-12位密码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
                <van-button round block type="danger" @click="clean" class="clean">
                    重置
                </van-button>
            </div>
        </van-form>
        <div class="towhere">
            <span style="color:red" @click="tologin">登录</span>
            <span style="color: #99A6C4;" @click="tofindps">找回密码</span>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { UserReg, GetCodeLogin, UserVerifyCode, FindUserInfo } from './userapi'
import { showToast } from 'vant'
import { useComon } from '../../Hooks/comon';
import { useRouter } from 'vue-router';


const router = useRouter()
const { gotowhere } = useComon()
const phone = ref('')
const sms = ref('')
const flag = ref(false)
const username = ref('')
const time = ref(60)
const password = ref('')
const password2 = ref('')

const tofindps = () => {//跳转找回密码
    gotowhere('/find/pass')
}

const tologin = () => {
    gotowhere('/user/login')
}

const countdown = () => {//倒计时
    flag.value = true
    let timer = null
    timer = setInterval(() => {
        time.value -= 1
        if (time.value == 0) {
            clearInterval(timer)
            time.value = 60
            flag.value = false
        }
    }, 1000)
}

const sendcode = async () => {//获取验证码
    const res = await GetCodeLogin({ phone: phone.value })
    if (res.data.code == 200) {
        showToast({
            message: '验证码发送成功'
        })
        countdown()
    } else {
        showToast({
            message: res.data.message
        })
    }
}

const userreg = async () => {//注册
    let res = await UserReg({
        dbpass: password2.value,
        password: password.value,
        phone: phone.value,
        username: username.value
    })
    console.log(res);
}

const fyuser = async () => {//验证用户是否注册
    const res = await FindUserInfo({ phone: phone.value })
    if (res.data.code == 200) {

        if (res.data.result == null) {
            sendcode()
        } else {
            showToast({
                message: '手机号已注册'
            })
        }
    } else {
        showToast({
            message: '出错了'
        })
    }
}

const verifycode = async () => {//验证验证码
    const res = await UserVerifyCode({ phone: phone.value, captcha: sms.value })
    if (res.data.code == 200) {
        //注册
        userreg()
    } else {
        showToast({
            message: '验证码输入错误'
        })
    }
}

const send = () => {//发送按钮
    fyuser()
}

const onSubmit = () => {//提交按钮
    if (password.value !== password2.value) {
        showToast({
            message: '两次密码不一致'
        })
    } else {
        verifycode()
        router.push({
            path: '/user/login',
            query: {
                phone: phone.value
            }
        })
    }
}

const validator = (val) => {
    if (val.length < 6 || val.length > 12) {
        return false
    }
}

const clean = () => {
    phone.value = ''
    sms.value = ''
    username.value = ''
    password.value = ''
    password2.value = ''
}

</script>





<style lang="scss" scoped>
.clean {
    margin-top: 16px;
}


.form {
    .sub {
        width: 80%;
    }

}

.welcom {
    font-size: 16px;
    color: #99A6C4;
    margin-left: 30px;
    line-height: 50px;
    width: 60%;
}

.towhere {
    line-height: 50px;
    margin: 0 auto;
    width: 90%;
    display: flex;
    justify-content: space-between;
}

.btns {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
}
</style>